<!-- 审批 SB 们的列表 -->
<template>
  <el-dialog v-model="dialogTableVisible" title="选择审批人" width="400" draggable destroy-on-close :show-close="false">
    <el-select v-model="sltValue" filterable clearable :remote-method="remoteMethod" placeholder="选择" size="large" style="width: 100%" @change="handleClickChange">
      <el-option v-for="item in options" :key="item.id" :label="`${item.text}（${item.value}）`" :value="item.id" />
    </el-select>
    <template #footer>
      <el-button type="primary" @click="handleClickConfirm">确定</el-button>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import { ref, watch } from 'vue'
import { useProjectssStore, useUsersStore } from '../../stores'

const dialogTableVisible = ref(false)

const props = defineProps({
  modelValue: {
    type: Object as any,
    default: null,
  },
  listType: {
    type: Number,
    default: 0,
  },
})

const emit = defineEmits(['update:modelValue', 'closed'])

const sltValue = ref<any>(props.modelValue ? props.modelValue.id : null)
const options = ref<any[]>([])

watch(
  () => props.modelValue,
  (newVal) => {
    sltValue.value = newVal?.id ?? null
  }
)

const handleClickConfirm = () => {
  dialogTableVisible.value = false
}
const handleClickChange = () => {
  emit(
    'update:modelValue',
    options.value.find((item) => item.id == sltValue.value)
  )
  dialogTableVisible.value = false
}
/**
 * 打开对话框并初始化数据
 */
const openDialog = async () => {
  dialogTableVisible.value = true
  switch (props.listType) {
    case 1: // 用户
      options.value = useUsersStore()
        .userApprovalList.filter((item: any) => item.userId !== 112 && item.userId !== 113)
        .map((item: any) => {
          return {
            id: item.userId,
            text: item.nickName,
            value: item.userName,
            userId: item.userId,
            userName: item.userName,
            nickName: item.nickName,
            disabled: false,
          }
        })
      break
    case 2: // 项目
      options.value = useProjectssStore()
        .getAllState()
        .map((item) => {
          return {
            id: item.id,
            text: item.cname,
            value: item.code,
            userId: item.id,
            userName: '',
            nickName: '',
            disabled: false,
          }
        })
      break
  }
}

const remoteMethod = (query: string) => {
  switch (props.listType) {
    case 1: // 用户
      options.value = query
        ? useUsersStore()
            .userApprovalList.filter((item: any) => item.userId !== 112 && item.userId !== 113 && item.userName.toLowerCase().includes(query.toLowerCase()) && item.nickName.toLowerCase().includes(query.toLowerCase()))
            .map((item: any) => {
              return {
                id: item.userId,
                text: item.nickName,
                value: item.userName,
                userId: item.userId,
                userName: item.userName,
                nickName: item.nickName,
                disabled: false,
              }
            })
        : []
      break
    case 2: // 项目
      options.value = query
        ? useProjectssStore()
            .getAllState()
            .filter((item: any) => item.code.toLowerCase().includes(query.toLowerCase()) || item.cname.toLowerCase().includes(query.toLowerCase()))
            .map((item) => {
              return {
                id: item.id,
                text: item.cname,
                value: item.code,
                userId: item.id,
                userName: '',
                nickName: '',
                disabled: false,
              }
            })
        : []
      break
  }
}

defineExpose({ openDialog })
</script>
<style lang="scss" scoped></style>
